<template>
  <div class="client-add">
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
      <template #footer>
        <a-space :size="20">
          <a-button type="outline" @clikc="router.go(-1)">
            <template #default>取消</template>
          </a-button>
          <a-button type="primary" @click="submit">
            <template #default>执行</template>
          </a-button>
        </a-space></template
      >
      <div class="base-info">
        <TitleBox title="基本消息"></TitleBox>
        <div class="base-info-header">
          <a-form ref="formRef" :model="form" auto-label-width>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="生产出库单号:"
                  ><a-input
                    style="width: 320px"
                    placeholder="系统自动生成"
                    disabled
                    v-model="form.list.number"
                /></a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item required label="关联生产计划号：">
                  <a-input
                    style="width: 320px"
                    disabled
                    v-model="form.list.producePlanNumber"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="计划用料时间："
                  ><a-date-picker
                    placeholder="系统自动生成"
                    :style="{ width: '320px' }"
                    disabled
                /></a-form-item> </a-col
              >{{ form.list.amount }}
              <a-col :span="12">
                <a-form-item label="下达人："
                  ><a-input
                    :style="{ width: '320px' }"
                    v-model="form.list.staffName"
                    disabled
                    allow-clear
                /></a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <TitleBox title="物料出库明细"></TitleBox>
        <div class="base-info-header">
          <a-table :data="form.list.pickItem" :pagination="false">
            <template #columns>
              <a-table-column :width="80" align="center">
                <template #title> 序号 </template>
                <template #tr> </template>
                <template #cell="{ rowIndex }">
                  <div style="position: relative">
                    <div>{{ rowIndex + 1 }}</div>
                  </div>
                </template>
              </a-table-column>
              <a-table-column
                title="物料编码"
                :width="100"
                data-index="managementNumber"
                align="center"
              >
              </a-table-column>
              <a-table-column
                title="物料名称"
                :width="100"
                data-index="managementName"
                align="center"
              ></a-table-column>
              <a-table-column
                title="规格型号"
                :width="100"
                data-index="spec"
                align="center"
              ></a-table-column>
              <a-table-column
                title="基本单位"
                :width="100"
                data-index="basicName"
                align="center"
              ></a-table-column>
              <a-table-column
                title="物料分类"
                :width="100"
                data-index="materialName"
                align="center"
              ></a-table-column>
              <a-table-column
                title="需求数量"
                :width="100"
                data-index="demandAmount"
                align="center"
              ></a-table-column>
              <a-table-column
                title="空闲库存数量"
                :width="100"
                data-index="freeAmount"
                align="center"
              ></a-table-column>
              <!-- <a-table-column
                  align="center"
                  :width="80"
                  title="检测类别"
                  data-index="detectionType"
                >
                  <template #cell="{ record }">
                    <a-select v-model="record.detectionType">
                      <a-option :value="1">抽检</a-option>
                      <a-option :value="2">全检</a-option>
                      <a-option :value="3">免检</a-option>
                    </a-select>
                  </template>
                </a-table-column> -->

              <a-table-column title="领料数量" :width="100" align="center"
                ><template #cell="{ record }">
                  <a-input-number
                    :min="1"
                    disabled
                    v-model="record.amount" /></template
              ></a-table-column>
            </template>
          </a-table>
        </div>
      </div>
    </pageHeader>
  </div>
  <!-- <div>
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    </pageHeader>
    <div>
      <div class="info-item">
        <div style="width: 100%; display: flex; margin: 20px 50px">
          <a-space>
            <div
              style="
                width: 4px;
                height: 15px;
                background-color: rgba(61, 126, 255, 1);
                border: none;
                border-radius: 2px;
              "
            >
            </div>
            <h3>基本信息222</h3>
          </a-space>
        </div>
        <div style="margin-left: 10%"
          ><a-form ref="formRef" :model="form" auto-label-width>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="生产出库单号:"
                  ><a-input
                    style="width: 320px"
                    placeholder="系统自动生成"
                    disabled
                    v-model="form.list.number"
                /></a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item required label="关联生产计划号：">
                  <a-input
                    style="width: 320px"
                    disabled
                    v-model="form.list.producePlanNumber"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="计划用料时间："
                  ><a-date-picker
                    placeholder="系统自动生成"
                    :style="{ width: '320px' }"
                    disabled
                /></a-form-item> </a-col
              >{{ form.list.amount }}
              <a-col :span="12">
                <a-form-item label="下达人："
                  ><a-input
                    :style="{ width: '320px' }"
                    v-model="form.list.staffName"
                    disabled
                    allow-clear
                /></a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <div style="width: 100%; display: flex; margin: 20px 50px">
          <a-space>
            <div
              style="
                width: 4px;
                height: 15px;
                background-color: rgba(61, 126, 255, 1);
                border: none;
                border-radius: 2px;
              "
            >
            </div>
            <a-space :size="50"><h3>物料出库明细 ：</h3></a-space>
          </a-space>
        </div>
        <div
          style="
            width: 90%;
            margin-left: 5%;
            box-shadow: 1px 1px 5px rgb(153 153 153 / 35%);
            border-radius: 4px;
          "
        >
          <div style="padding: 30px">
            <div style="text-align: right" class="button-item"></div>
            <a-table :data="form.list.pickItem" :pagination="false">
              <template #columns>
                <a-table-column :width="80" align="center">
                  <template #title> 序号 </template>
                  <template #tr> </template>
                  <template #cell="{ rowIndex }">
                    <div style="position: relative">
                      <div>{{ rowIndex + 1 }}</div>
                    </div>
                  </template>
                </a-table-column>
                <a-table-column
                  title="物料编码"
                  :width="100"
                  data-index="managementNumber"
                  align="center"
                >
                </a-table-column>
                <a-table-column
                  title="物料名称"
                  :width="100"
                  data-index="managementName"
                  align="center"
                ></a-table-column>
                <a-table-column
                  title="规格型号"
                  :width="100"
                  data-index="spec"
                  align="center"
                ></a-table-column>
                <a-table-column
                  title="基本单位"
                  :width="100"
                  data-index="basicName"
                  align="center"
                ></a-table-column>
                <a-table-column
                  title="物料分类"
                  :width="100"
                  data-index="materialName"
                  align="center"
                ></a-table-column>
                <a-table-column
                  title="需求数量"
                  :width="100"
                  data-index="demandAmount"
                  align="center"
                ></a-table-column>
                <a-table-column
                  title="空闲库存数量"
                  :width="100"
                  data-index="freeAmount"
                  align="center"
                ></a-table-column>
              <a-table-column
                  align="center"
                  :width="80"
                  title="检测类别"
                  data-index="detectionType"
                >
                  <template #cell="{ record }">
                    <a-select v-model="record.detectionType">
                      <a-option :value="1">抽检</a-option>
                      <a-option :value="2">全检</a-option>
                      <a-option :value="3">免检</a-option>
                    </a-select>
                  </template>
                </a-table-column> 

                <a-table-column title="领料数量" :width="100" align="center"
                  ><template #cell="{ record }">
                    <a-input-number
                      :min="1"
                      disabled
                      v-model="record.amount" /></template
                ></a-table-column>
              </template> </a-table
          ></div>
        </div>
      </div>
    </div>
  </div> -->
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import dayjs from 'dayjs';
  import { useRoute, useRouter } from 'vue-router';
  import {
    GetClientOrder,
    GetClientOrderDetail,
    putPoductOccupied,
    GetOrderDetail,
  } from '@/api/order-management/client-order/index';
  import { PostProduceOutbound } from '@/api/inventory-management/outbound-management/produce-outbound/index';
  import { useProduceStore } from '@/store';

  const Store: any = useProduceStore();
  const formRef = ref();
  // const Store = useOrderStore();
  const route = useRoute();
  const router = useRouter();
  const tableRef = ref();
  const title: string = '新建生产出库单';
  const breadCrumb: string[] = [
    '库存管理',
    '出库管理',
    '生产领料出库',
    '新建生产出库单',
  ];
  const entryType = Number(route.query.entryType);
  const form = reactive<any>({ list: {} });
  const userInfo = JSON.parse(sessionStorage.getItem('loginInfo') as any);

  // 表格配置
  const args = reactive({
    stripe: false,
    scroll: {
      y: 2000,
      x: 500,
    },
    bordered: {
      headerCell: true,
    },
    rowKey: 'id', // 批量选择按钮 以合同名称来作为key
  });

  const OrderList = ref();
  const getOrderList = async () => {
    const res = await GetClientOrder({ page: 1, size: -1 });
    OrderList.value = res.content;
  };
  getOrderList();
  const isSelectSupplier = ref(false);

  const getData = async () => {
    Object.assign(form.list, Store.PickingData);
    // form.list = {
    //   producePlanNumber: Store.PickingData.planCode,
    //   staffId: userInfo.id,
    //   staffName: userInfo.name,
    //   orderId: Store.PickingData.workOrderId,
    //   planId: Store.PickingData.id,
    //   product: Store.PickingData.product,
    //   amount: Store.PickingData.amount,
    // };
    if (Store.PickingData.finish) form.list.finish = Store.PickingData.finish;
    form.list.pickItem = form.list.product.map((item) => {
      return {
        pickAmount: item.amount,
        basicUnitId: item.basicUnitId,
        managementId: item.id,
        ...item,
      };
    });
  };
  getData();

  const submit = async () => {
    try {
      form.list.outboundDate = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
      await PostProduceOutbound({ ...form.list });
      router.push({ name: 'ProduceOutbound' });
    } catch (err: unknown) {
      console.log(err);
    }
  };
</script>

<style scoped lang="less">
  .client-add {
    .base-info {
      padding: 10px 40px 10px 40px;

      .avatar {
        position: absolute;
        width: 100px;
      }
      &-header {
        // padding: 0 100px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        // :deep(.arco-form-item-content-flex) {
        //   display: block;
        //   line-height: 32px;
        //   color: #cccccc29;
        // }
      }

      &-extra {
        .contact-info,
        .invoice-info,
        .client-info,
        .remarks-info {
          padding: 0 100px;
        }
      }
    }
  }

  :deep(.arco-table-th) {
    font-weight: bold;
    // font-size: 13px;
  }
</style>
